<template>
  <div style="background: black">
    <canvas id="bg" width="1000" height="1000"/>
    <div class="cockpitMainBox" >
      <cockpit-detail v-show="showDetail" @everydaySales="openDetail('everydaySales')" @companyEverydaySales="companyEverydaySales" :visible.sync="showDetail" :data="detailData" />
      <div class="title">
        <div class="titleText flex a-item">妙配商贸管理平台销售看板</div></div>
      <div class="company tableBox">
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="more" @click="openDetail('company')"></div>
        <div class="reportTitle">
          公司直营数据显示
        </div>
        <div class="xial"/>
        <div style="width: 100%;height: 80%" class="companyInformation flex flex-row ">
          <div class="companyData contentReport" v-for="item in showcompanylist">
            <div class="containerLeftBor" />
            <div class="containerRightBor" />
            <div class="flex">
              <div>
                <div class="companyName">{{ item.companyName }}销售数</div>
                <div class="acceptTaxAmount fl1">{{ item.acceptTaxAmount }}</div>
                <div class="companyIncrease">本月增长{{ item.orderCountGrowthRate*100 }}%</div>
              </div>
              <div style="margin-left: 3%">
                  <div>
                    <div class="companyName">直营销售数</div>
                    <div class="acceptTaxAmount fl1" style="font-size: 0.3em">{{ item.directSaleOrNot.directAcceptTaxAmount }}</div>
                  </div>
                  <div>
                    <div class="companyName">非直营销售数</div>
                    <div class="acceptTaxAmount fl1" style="font-size: 0.3em">{{ item.directSaleOrNot.indirectAcceptTaxAmount }}</div>
                  </div>
              </div>
            </div>

          </div>
      </div>
    </div>
      <div class="salesTotal tableBox">
          <div class="leftBor" />
          <div class="rightBor" />
          <div class="reportTitle">
            销售总额
          </div>
          <div class="xial"/>
          <div class="amountBox flex">
            <div  class="amount">￥</div>
            <div v-for="(item,index) in cockpitData.totalSale.acceptTaxAmountSum" :class="(8-index-1)%3===0 && index !== 7?'thousand':''" class="amount">{{ item }}</div>
          </div>
          <div class="salesDataList flex">
            <div class="salesData contentReport flex j-content">
              <div class="containerLeftBor" />
              <div class="containerRightBor" />
              <div style="margin: auto;height:100%">
                <div style="color: #08D9F1" class="num flex j-content">{{ cockpitData.totalSale.orderCountSum }}</div>
                <div class="name flex j-content">订单笔数</div>
                <img src="../../../assets/images/cockpit/dingdanbishu.png" alt="">
              </div>
            </div>
            <div class="salesData contentReport flex j-content">
              <div class="containerLeftBor" />
              <div class="containerRightBor" />
              <div style="margin: auto;height:100%">
                <div  class="salesNum num flex j-content">{{ cockpitData.totalSale.acceptBoxCountSum }}</div>
                <div class="name flex j-content">销售总箱数</div>
                  <img src="../../../assets/images/cockpit/xiaoshuozongshu.png" alt="">
              </div>
            </div>
            <div class="salesData contentReport flex j-content">
              <div class="containerLeftBor" />
              <div class="containerRightBor" />
              <div style="margin: auto;height:100%">
                <div  class="add num flex j-content">{{ cockpitData.totalSale.acceptTaxAmountSumGrowthRate }}%</div>
                <div class="name flex j-content">销售额增加</div>
                <img src="../../../assets/images/cockpit/xiaoshouezengzhang.png" alt="">
              </div>
            </div>
          </div>
        </div>
      <div class="proportion tableBox">
        <div class="more" @click="openDetail('proportion')"></div>
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          直营和非直营比例占比，分公司显示
        </div>
        <div class="xial"/>
        <echarts-template :width="containSizes.proportion.width"  :height="containSizes.proportion.height" :option="proportionOption" />
      </div>
      <div class="everydaySales tableBox">
        <div class="more" @click="openDetail('everydaySales')"></div>
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          每日销售额(万)
        </div>
        <div class="xial"/>
        <echarts-template :width="containSizes.everydaySales.width"  :height="containSizes.everydaySales.height" :option="everydaySalesOption" />
      </div>
      <div class="brand tableBox">
        <div class="more" @click="openDetail('brand')"></div>
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          品牌销售
        </div>
        <div class="xial"/>
        <div style="width: 100%;height: 80%" class="companyInformation flex flex-row ">
          <echarts-template :width="containSizes.brand.width"  :height="containSizes.brand.height" :option="brandOption" />
      </div>
    </div>
      <div class="salesVolume tableBox">
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          每日销售额增速
        </div>
        <div class="xial"/>
        <echarts-template :width="containSizes.salesVolume.width"  :height="containSizes.salesVolume.height" :option="salesVolumeOption" />
      </div>
      <div class="irrigationDitch tableBox">
        <div class="more" @click="openDetail('irrigationDitch')"></div>
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          客户分类
        </div>
        <div class="xial"/>
        <echarts-template :width="containSizes.irrigationDitch.width"  :height="containSizes.irrigationDitch.height" :option="irrigationDitchOption" />

      </div>
      <div class="city  tableBox">
        <div class="more" @click="openDetail('city')"></div>
        <div class="leftBor" />
        <div class="rightBor" />
        <div class="reportTitle">
          主要城市销售额
        </div>
        <div class="xial"/>
        <echarts-template :width="containSizes.city.width"  :height="containSizes.city.height" :option="cityOption" />
      </div>
  </div>
  </div>
</template>

<script>
import echartsTemplate from '@/components/echartsTemplate/echartsTemplate'
import { debounce } from '../../../utils/auth'
import cockpitDetail from './cockpitDetail'
import { getCockpit } from '../../../api/erp/cockpit'
import Vue from 'vue'

export default {
  name: 'index',
  components:{echartsTemplate, cockpitDetail},
  data(){
    return{
      status:0,
      query:{
        year:2023,
        month:1
      },
      showDetail:false,
      everydaySalesOption:{},
      proportionOption:{},
      brandOption:{},
      salesVolumeOption:{},
      irrigationDitchOption:{},
      cityOption:{},
      cockpitData:{
        totalSale:{
          acceptTaxAmountSum:[]
        }
      },
      //当前需要显示的直营公司
      showcompanylist:[],
      //明细数据
      detailData:{
        title:'公司直营数据',
        props:[{prop:'companyName',label:'配送中心'},{prop:'orderCount',label: '销售单数'},{prop:'acceptBoxCount',label:'销售箱数'},{prop:'acceptTaxAmount',label:'销售金额'}],
        data:[]
      },
      detailProps:{
        company:{
          title:'公司直营数据',
          props:[{prop:'companyName',label:'配送中心'},{prop:'orderCount',label: '销售单数'},{prop:'acceptBoxCount',label:'销售箱数'},{prop:'acceptTaxAmount',label:'销售金额'}],
          data:[]
        },
        everydaySales:{
          title:'每日销售额',
          props:[
            {prop:'companyName',label:'配送中心'},
            {prop:'boxNum',label:'箱数'},
            {prop:'amount',label:'金额'},
            {prop:'operate',label:'操作'}
          ],
          data:[]
        },
        proportion:{
          title:'直营和非直营比例占比',
          props:[
            {prop:'companyName',label:'配送中心'},
            {prop:'directAcceptTaxAmount',label:'直营销售金额'},
            {prop:'indirectAcceptTaxAmount',label:'非直营销售金额'}
          ],
        },
        brand:{
          title:'品牌销量',
          props:[
            {prop:'goodsBrandName',label:'品牌名称'},
            {prop:'acceptBoxCount',label:'箱数'},
            {prop:'acceptTaxAmount',label:'金额'}
          ],
        },
        irrigationDitch:{
          title:'客户分类',
          props:[
            {prop:'customerTypeName',label:'客户分类'},
            {prop:'acceptBoxCount',label:'箱数'},
            {prop:'acceptTaxAmount',label:'金额'}
          ],
        },
        city:{
          title:'主要城市销售额',
          props:[
            {prop:'companyName',label:'城市'},
            {prop:'acceptBoxCountSum',label:'箱数'},
            {prop:'acceptTaxAmountSum',label:'金额'}
          ],
        },
      },
      //解决echarts无法跟随屏幕变化更新高度
      /**
       * width 容器宽度
       * height 容器高度
       * widthProportion: 容器占父级元素宽度百分比‘
       * heightProportion: 容器占父级元素高度百分比
      * */
      containSizes:{
        everydaySales:{width:'900px',height:'200px',widthProportion:.95,heightProportion:0.75},
        proportion:{width:'700px',height:'200px',widthProportion:1,heightProportion:.9},
        brand:{width:'700px',height:'200px',widthProportion:1,heightProportion:.8},
        salesVolume:{width:'700px',height:'200px',widthProportion:.95,heightProportion:.8},
        irrigationDitch:{width:'700px',height:'200px',widthProportion:.95,heightProportion:.8},
        city:{width:'700px',height:'200px',widthProportion:.95,heightProportion:.8},
      },
      app:null,
      bg:null,
      ctx:null,
      bgConfig:{
        columnsCount:0,
        charIndex:[],
      },
      ctxfontSize:0,
    }
  },
  beforeCreate() {
    //每日销售额
    setTimeout(()=>{
      this.everydaySalesOption = {
        tooltip: {},
        animation: true,
        grid:{
          left:30,
          top:10,
          right:0,
          bottom:20
        },
        xAxis: {
          data: ['02.01', '02.02', '02.03', '02.04', '02.05', '02.06','02.07', '02.08', '02.09', '02.10', '02.11', '02.12',
            '02.13', '02.14', '02.15', '02.16', '02.17', '02.18','02.19', '02.20', '02.21', '02.22', '02.23', '02.24',
            '02.25', '02.26', '02.27', '02.28', '02.29', '02.30'
          ],
          axisLabel: {
            show:true,
            interval:0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255,1)'
            }
          },
          splitLine:{
            show:false
          }
        },
        yAxis: {
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            }
          },
          splitLine: {
            show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
            interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
            width: 3,    // 分隔线线宽
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            },
            type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },

        },
        color:{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#00CBD2' // 0% 处的颜色
          }, {
            offset: 1, color: '#00A2FD' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [
              5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20,
              5, 20, 36, 10, 10, 20,5, 20, 36, 10, 10, 20,
              5, 20, 36, 10, 10, 20
            ],
            barWidth: 15,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    //数值样式
                    color: '#fff',
                    fontSize: 12,
                  },
                },
              },
            },
          }
        ]
      };
    },500)
    //背景颜色
    const bgcolors = ['rgba(143,20,224,.5)','rgba(253,80,102,.5)','rgba(244,207,62,.5)','rgba(0,249,238,.5)','rgba(4,124,255,.5)']
    //柱子颜色
    const colors = ['#8F14E0','#FD5066','#F4CF3E','#00F9EE','#047CFF']
    //直营和非直营比例占比，分公司显示
    setTimeout(()=>{
      this.proportionOption = {
        animation: true,
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          show: true,
          data:[{
            name:'直营分公司销售笔数对比',
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          },{
            name:'非直营分公司销售笔数对比',
            textStyle: {
              color: '#fff',
              fontSize:10
            }
          }],
          left: 10
        },
        grid: {
          top:30,
          left:60,
          bottom:20
        },
        xAxis: [{
          type: "value",
          splitLine: {
            show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
            interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            },
            width: 3,    // 分隔线线宽
            type: 'solid',     // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
          },
          axisLine:{
            show: false,
          },
          axisLabel: {
            show:true,
            interval:0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },

          },
        }],
        yAxis: [{
          type: "category",
          data: ["路桥", "天平", "临海", "黄岩", "松门", "大溪泽国", "椒江"],
          axisLabel: {
            show:true,
            interval:0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },

          },
          axisLine:{
            show: false,
          },
          splitLine: {
            show: false,
          },
        }],
        series: [{
          name: "直营分公司销售笔数对比",
          type: "bar",
          barWidth: 15,
          data: [10, 52, 200, 334, 390, 330, 220],
          color:'#02BBFE',
          barGap:.02,
          itemStyle:{
            barBorderRadius:[0,15,15,0],
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },
          }
        },
        {
          name: "非直营分公司销售笔数对比",
          type: "bar",
          barWidth: 15,
          data: [11, 52, 203, 334, 35, 40, 250],
          color:'#EDDB8B',
          itemStyle: {
            barBorderRadius: [0,15,15,0]
          }
        }
        ]
      }
    })
    //品牌销售
    setTimeout(()=>{
      this.brandOption= {
        animation: true,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          top:0,
          left:80,
          bottom: 0
        },
        xAxis: [{
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show:true,
            interval:0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },

          },
        }],
        yAxis: [{
          type: "category",
          data: ["品牌a", "品牌b", "品牌c", "品牌d", "品牌e"],
          splitLine: {
            show: false,
          },
          axisLine:{
            show: false,
          },
          axisLabel: {
            show:true,
            interval:0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255)',
              fontSize: 12
            },

          },
        }],
        series: [{
          name: "总金额",
          type: "bar",
          barWidth: 10,
          data: [100, 100, 100, 100, 100],
          itemStyle:{
            barBorderRadius:[0,5,5,0],
            color:function(params) {
              return bgcolors[params.dataIndex]
            }
          }
        },
          {
            // 分隔
            type: 'pictorialBar',
            name:'销售金额',
            itemStyle: {
              normal: {
                color:function(params) {
                  return colors[params.dataIndex]
                }
              }
            },
            symbol: 'rect',
            symbolRepeat: 'fixed',
            symbolMargin: 1,
            symbolClip: true,
            symbolSize: [3, 8],

            // symbolBoundingData: 100,
            data: [10, 52, 20, 34, 90],
            width: 1,
            barWidth: 10,
            z: 10,
            zlevel: 3
          },

        ]
      }
    })
    //销售额增速
    setTimeout(()=>{
      this.salesVolumeOption = {
        animation: true,
        tooltip: {
          trigger: 'axis',
            axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        grid: {
          left: '0',
            right: '20',
            top:'10',
            bottom: 0,
            containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,.6)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日'],
        }],
          yAxis: [{
        axisLabel: {
          show: true,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize:10
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
        series: [{
        name: '销售额',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 2
          }
        },
        itemStyle: {
          normal: {
            color: '#06FAC3',
            borderWidth: 12
          }
        },
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
      }]
      };

    })
    //渠道销售
    const placeItemStyle = {
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      itemStyle: {
        color: "rgba(255,255,255,.1)",
      },
      emphasis: {
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
      },
    };
    setTimeout(()=>{
      this.irrigationDitchOption = {
        tooltip: {},
        animation: true,
        // yAxis: {},
        legend:{
          show:false
        },
        labelLine:{
          show:false
        },
        series: [
          {
            name: "销量",
            type: "pie",
            radius: ["78%", "90%"],
            color: ["#FEDB65", "#cbccd0"],
            zlevel: 1,
            hoverAnimation: false, //鼠标移入变大
            data: [
              {
                value: 55,
                name: "渠道A",
                itemStyle: {
                  // color: '#00BDAE',
                  //   borderRadius: 15,
                },
                labelLine:{
                  show:false
                },
              },
              {
                value: 100,
                name: "",
                ...placeItemStyle,
              },
            ],
          },
          {
            name: "销量",
            type: "pie",
            radius: ["65%", "77%"],
            color: ["#00FFFF", "#cbccd0"],
            zlevel: 2,
            hoverAnimation: false, //鼠标移入变大
            data: [
              {
                value: 32,
                name: "渠道b",
                itemStyle: {
                  // color: '#00BDAE',
                  //   borderRadius: 15,
                },
                label: {
                  normal: {
                    show: true,
                    position: 'center',
                    color:'#fff',
                    formatter: '{b|客户分类}'+ '\n\r' +'{b|总销售额度}',
                    rich: {
                      a:{
                        fontSize: 20,
                        color:'#fff'
                      },
                      b: {
                        fontSize: 15,
                        color:'#fff',
                      },
                    }
                  },
                  emphasis: {//中间文字显示
                    show: true,
                  }
                },
                labelLine: {
                  length: 0,
                },
              },
              {
                value: 54,
                name: "",
                ...placeItemStyle,
              },
            ],
          },
          {
            name: "销量",
            type: "pie",
            radius: ["52%", "64%"],
            color: ["#3D7FFF", "#cbccd0"],
            zlevel: 3,
            hoverAnimation: false, //鼠标移入变大
            itemStyle: {
              color: "#3D7FFF",
              //   borderRadius: 15,
            },
            labelLine:{
              show:false
            },
            data: [
              {
                value: 28,
                name: "渠道c",
                labelLine: {
                  length: 70,
                },
              },
              {
                value: 100,
                name: "",
                ...placeItemStyle,
              },
            ],
          },
        ],
      }
    })
    //主要城市
    setTimeout(()=>{
      this.cityOption = {
        animation: true,
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        grid: {
          top:30,
          left:60,
          bottom:20
        },
        xAxis: [{
          type: "value",
          splitLine: {
            show: false,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
          },
          axisLine:{
            show: false,
          },
          axisLabel: {
            show:true,
            interval:0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },

          },
        }],
        yAxis: [{
          type: "category",
          data: ["路桥", "天平", "临海", "黄岩", "松门", "大溪泽国", "椒江"],
          axisLabel: {
            show:true,
            interval:0,//代表显示所有x轴标签显示
            textStyle: {
              color: 'rgba(255,255,255,.45)'
            },

          },
          axisLine:{
            show: false,
          },
          splitLine: {
            show: false,
          },
        }],
        series: [
          {
            name: "",
            type: "bar",
            barWidth: 15,
            data: [11, 52, 203, 334, 35, 40, 250],
            color:'#03DFFC',
            itemStyle: {

            }
          }
        ]
      }
    })
  },
  created() {
    window.addEventListener('keydown',(e)=>{
      if(e.code === 'F11'){
        e.preventDefault()
        if (this.status){
          this.unqp()
        }else {
          this.qp()
        }

      }
    })
    this.onGet()
    setInterval(()=>{
      this.onGet()
    },1000*600)
  },
  mounted() {
    document.querySelector('.cockpitMainBox').style.height=`calc(100vh - ${84 / this.getRatio()}px)`
    this.app = document.querySelector('.app-main')
    const domResize = new ResizeObserver(()=>{
      this.setSize()
    })
    const _this = this
    window.addEventListener('resize',debounce(function(){
        document.querySelector('.cockpitMainBox').style.height=`100vh`
        _this.computedSize()
    }))
    domResize.observe(this.app)
    //背景文字坠落
    this.bg = document.querySelector('#bg')
    this.ctx = this.bg.getContext('2d')
    setInterval(()=>{
      this.draw()
    },40)

  },
  methods:{
    async onGet(){
      const {data} = await getCockpit()
      this.cockpitData = data
      this.detailProps.company.data = data.companyDirectSaleList
      this.showcompanylist = data.companyDirectSaleList.slice(0,4)
      this.showcompanylist.forEach((item,index)=>{
        const index1 = data.companyDirectSaleOrNotList.findIndex(val=>
          item.companyCode === val.companyCode
        )
        item.acceptTaxAmount = ~~item.acceptTaxAmount
        if (~index1){
          this.showcompanylist[index].directSaleOrNot ={
            directAcceptTaxAmount:~~data.companyDirectSaleOrNotList[index1].directAcceptTaxAmount ,
            indirectAcceptTaxAmount:~~data.companyDirectSaleOrNotList[index1].indirectAcceptTaxAmount
          }
        }
      })

      const amount = ~~(data.totalSale.acceptTaxAmountSum)
      const acceptTaxAmountSum = new Array(7).fill(0)
      const amountStr = amount.toString()
      for(let i in amountStr){
        acceptTaxAmountSum[i] = amountStr[i]
      }
      const acceptTaxAmountSumGrowthRate = (data.totalSale.acceptTaxAmountSumGrowthRate*100).toFixed(4)
      this.cockpitData.directSale = Object.assign(data.totalSale,{acceptTaxAmountSum,acceptTaxAmountSumGrowthRate})

      //每日销售额
      const days= new Date(this.query.year,this.query.month,0).getDate()
      const dailySaleSum = new Array(days).fill(0)

      dailySaleSum.forEach((item,index)=>{
        dailySaleSum[index] = ((data.dailySaleSum[`acceptTaxAmount${index+1}`]/10000)+0.5)>>0
      })
      const month = new Date().getMonth()+1
      this.everydaySalesOption.xAxis.data = dailySaleSum.map((item,index)=>`${month}-${index+1}`)
      this.everydaySalesOption.series[0].data = dailySaleSum
      //品牌
      const brandTop5 = data.brandSaleList.slice(0,5)
      const brandx = []
      const brandy = []
      for(let i of brandTop5){
        brandx.unshift(i.goodsBrandName)
        brandy.unshift(i.acceptTaxAmount)
      }
      this.brandOption.yAxis[0].data =brandx
      const amountSum = data.totalSale.acceptTaxAmountSum.join('')
      this.brandOption.series[0].data =new Array(5).fill(amountSum)
      this.brandOption.series[1].data = brandy
      //直营非直营
      const companyDirectSaleOrNotList = data.companyDirectSaleOrNotList.slice(0,7)
      const companyList = []
      const directAcceptTaxAmountList = []
      const indirectAcceptTaxAmountList = []
      for (let i of companyDirectSaleOrNotList){
        companyList.push(i.companyName)
        directAcceptTaxAmountList.push(i.directAcceptTaxAmount)
        indirectAcceptTaxAmountList.push(i.indirectAcceptTaxAmount)
      }
      this.proportionOption.yAxis[0].data = companyList
      this.proportionOption.series[0].data =  directAcceptTaxAmountList
      this.proportionOption.series[1].data =  indirectAcceptTaxAmountList
      //每日增速
      const dailySaleIncreaseSumList = new Array(days).fill(0)
      dailySaleIncreaseSumList.forEach((item,index)=>{
        dailySaleIncreaseSumList[index] = data.dailySaleIncreaseSum[`acceptTaxAmountIncrease${index}`]
      })
      this.salesVolumeOption.xAxis[0].data =  this.everydaySalesOption.xAxis.data
      this.salesVolumeOption.series[0].data = dailySaleIncreaseSumList
      //客户分类
      const customerTypeList = data.customerTypeSaleList.slice(0,3)

      customerTypeList.forEach((item,index)=>{
        this.irrigationDitchOption.series[index].data[0].name = item.customerTypeName
        this.irrigationDitchOption.series[index].data[0].value = item.acceptTaxAmount
        this.irrigationDitchOption.series[index].data[1].value = amountSum
      })
      //主要城市
      const citySaleList = data.citySaleList.slice(0,7)
      const cityNameList = []
      const cityDataList=[]
      for(let i of citySaleList){
        cityNameList.unshift(i.companyName)
        cityDataList.unshift(i.acceptTaxAmountSum)
      }
      this.cityOption.yAxis[0].data = cityNameList
      this.cityOption.series[0].data = cityDataList
      //设点点击事件
      this.detailProps.everydaySales.data=data.companyDailySaleList.map((item,index)=>{
        const company = data.companyDirectSaleOrNotList.find(val=>val.companyCode === item.companyCode)

        return {
          companyName:item.companyName,
          operate:{
            value:'更多',
            attribute:{
              style:{color:'#4d00ff',cursor: 'pointer'},
            },
            on:{
              click:function(e){
                this.$emit('companyEverydaySales',item)
              }
            }
          },
          boxNum:company.directAcceptBoxCount + company.indirectAcceptBoxCount,
          amount:company.directAcceptTaxAmount + company.indirectAcceptTaxAmount
        }
      })
      this.detailProps.proportion.data = data.companyDirectSaleOrNotList
      this.detailProps.brand.data = data.brandSaleList
      this.detailProps.irrigationDitch.data = data.customerTypeSaleList
      this.detailProps.city.data = data.citySaleList
    },
    getRatio() {
      var ratio = 0
      var screen = window.screen
      var ua = navigator.userAgent.toLowerCase()

      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio
      } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI
        }
      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth
      }

      if (ratio) {
        ratio = ratio / 1.25
      }
      return ratio
    },
    openDetail(type){
      this.showDetail = true
      this.detailData = this.detailProps[type]
    },
    draw(){
      this.ctx.fillStyle='rgba(0,0,0,.1)'
      this.ctx.fillRect(0,0,this.bg.width,this.bg.height)
      this.ctx.textBaseline = 'top'
      this.ctx.fillStyle='rgba(0,0,255,.3)'
      const y = (this.bg.height/this.ctxfontSize)>>0
      for(let i=0;i<this.bgConfig.columnsCount;i++){
        this.ctx.fillText(this.getRandomChar(),i*this.ctxfontSize,this.bgConfig.charIndex[i]*this.ctxfontSize)
        if(y < this.bg.height&&Math.random()>0.99){
          this.bgConfig.charIndex[i] = 0
        }else{
          this.bgConfig.charIndex[i]++
        }

      }
    },

    getRandomChar(){
      const str = '123456789qwertyuiopasdfghjklzxcvbnm'
      return str[(Math.random() * str.length)>>0]
    },
    computedSize(){
      Object.keys(this.containSizes).forEach(item=>{
        this.containSizes[item].width = `${document.querySelector(`.${item}`).offsetWidth * this.containSizes[item].widthProportion}px`
        this.containSizes[item].height = `${document.querySelector(`.${item}`).offsetHeight * this.containSizes[item].heightProportion}px`
      })
    },
    setSize:debounce(function(){
      this.computedSize()
      const size1 = (this.app.offsetWidth / 1920).toFixed(2) * 30
      const size2 = (this.app.offsetHeight / 1080).toFixed(2) * 30
      const size = Math.min(size1,size2)
      this.ctxfontSize = (this.bg.width / 60) >> 0
      this.ctx.font=`${this.ctxfontSize}px 微软雅黑`
      this.bgConfig.columnsCount =(this.bg.width / this.ctxfontSize)>> 0
      this.bgConfig.charIndex = new Array(this.bgConfig.columnsCount).fill(0)
      document.getElementsByTagName('body')[0].style.setProperty('--cockpitMainBoxFontSize',`${~~size}px`)
    },100),
    qp(){
      document.getElementsByTagName('body')[0].style.setProperty('--defaultContainerWidth','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainPt','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainZIndex','10')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultSideBarWidth','0')
      if(document.documentElement.RequestFullScreen){
        document.documentElement.RequestFullScreen();
      }
      //兼容火狐
      if(document.documentElement.mozRequestFullScreen){
        document.documentElement.mozRequestFullScreen();
      }
      //兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
      if(document.documentElement.webkitRequestFullScreen){
        document.documentElement.webkitRequestFullScreen();
      }
      //兼容IE,只能写msRequestFullscreen
      if(document.documentElement.msRequestFullscreen){
        document.documentElement.msRequestFullscreen();
      }
      this.status = 1
      document.querySelector('.fixed-header').style.display = 'none'
      document.querySelector('.cockpitMainBox').style.height=`${window.screen.height / this.getRatio()}px`
      document.querySelector('#el-main-footer').style.display = 'none'
    },
    unqp(){
      document.getElementsByTagName('body')[0].style.setProperty('--defaultContainerWidth','54px')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainPt','84px')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultAppMainZIndex','0')
      document.getElementsByTagName('body')[0].style.setProperty('--defaultSideBarWidth','200px')
      if(document.exitFullScreen){
        document.exitFullscreen()
      }
      //兼容火狐
      if(document.mozCancelFullScreen){
        document.mozCancelFullScreen()
      }
      //兼容谷歌等
      if(document.webkitExitFullscreen){
        document.webkitExitFullscreen()
      }
      //兼容IE
      if(document.msExitFullscreen){
        document.msExitFullscreen()
      }
      this.status = 0
      document.querySelector('.cockpitMainBox').style.height=`${window.screen.height / this.getRatio()}px`
      document.querySelector('#el-main-footer').style.display = 'block'
      document.querySelector('.fixed-header').style.display = 'block'
      document.querySelector('.sidebar-container').style.display = 'block'
    },
    companyEverydaySales(e){
      console.log(e)
      const data = new Array(new Date(this.query.year,this.query.month,0)
        .getDate())
        .fill(0)
        .map((item,index)=>{
        return {
          day:`${this.query.month}月${index+1}日`,
          amount:e[`acceptTaxAmount${index+1}`]
        }
      })
      this.detailData ={
        title:e.companyName,
        previous:true,
        previousClick:function(e){
          this.$emit('everydaySales')
        },
        props:[{prop:'day',label:'日期'},{prop:'amount',label: '金额'}],
        data:data
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@font-face {
  font-family: 'SourceHanSansCN-Medium';
  src: local('SourceHanSansCN-Medium'), url('../../../assets/font_icon/SourceHanSansCN-Medium.otf') format('opentype');
}
.cockpitMainBox{
  font-family: SourceHanSansCN-Medium;
  //background-image: url("../../../assets/images/cockpitBg.png");
  z-index: 2;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-width: 800px;
  font-size: var(--cockpitMainBoxFontSize,30px);
  transition: font-size linear 0.1s;
  position: relative;
  .title{
    background-image: url("../../../assets/images/cockpit/top_bg.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 10%;
    opacity:1;
    position: relative;
    .titleText{
      width: 45%;
      height: 100%;
      margin: auto;
      bottom: 0;
      font-size:1.2em;
      color: white;
      justify-content: center;
      letter-spacing: 2px;
    }
  }
    .company{
      width: 28%;
      height: 28%;
      position: absolute;
      left: 1%;
      top: 11%;
      overflow: hidden;
      .companyInformation{
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 2%;
        .companyData{
          width: 48%;
          height: 45%;
          padding: 1%;
          .companyName{
            color: white;
            font-size: 0.5em;
          }

          .companyNum{
            color: #66FFFF;
            font-size: 1em;
          }
          .acceptTaxAmount{
            color: #FEDB65;
            font-size: 1em;
            &:before{
              content: '￥';
              font-size: 0.2em;
            }
          }
          .companyIncrease{
            color: #FFFFFF;
            font-size: 0.1em;
            display: flex;
            align-items: center;
            &:before{
              content: '';
              background-image: linear-gradient(#0DBBB3,#66FFFF);
              display: block;
              width: 10px;
              height: 10px;
              border-radius: 10px;
              margin-right: 5px;
            }
          }
        }
      }
  }
  .brand{
    width: 28%;
    height: 28%;
    position: absolute;
    left: 1%;
    top: 70%;
    overflow: hidden;
  }
  .salesVolume{
      width: 27.5%;
      height: 28%;
      position: absolute;
      left: 29.5%;
      top: 70%;
      overflow: hidden;
  }
  .irrigationDitch{
    width: 12.2%;
    height: 28%;
    position: absolute;
    left: 57.5%;
    top: 70%;
    overflow: hidden;
  }
  .city{
    width: 28%;
    height: 31%;
    position: absolute;
    left: 71%;
    top: 67%;
    overflow: hidden;
  }
  .salesTotal{
    width: 40%;
    height: 28%;
    top: 11%;
    position: absolute;
    left: 30%;
    .amountBox{
      height: 20%;
      width: 100%;
      margin-top: 2%;
      display: flex;
      justify-content: space-between;
      .amount{
        width: 10%;
        height: 100%;
        color: #66FFFF;
        font-size: 1.5em;
        font-weight: 600;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(#335F9F,#0A1C44,#335F9F);
        border: #4E92E3 2px solid;
      }
    }
    .salesDataList{
      margin-top: 3%;
      width: 100%;
      height: 45%;
      justify-content: space-between;
      .salesData{
        height: 100%;
        width: 30%;
        .num{
          width: 100%;
          height: 30%;
          font-size: 1em;
        }
        .name{
          color: white;
          font-size: 0.3em;
          width: 100%;
        }
        img{
          height: 40%;
          display: block;
          margin: 2% auto;
        }
        .salesNum{
          background-image: linear-gradient(#E0A912,#FDE053);
          -webkit-background-clip: text;
          color: transparent;
        }
        .add{
          background-image: linear-gradient(left,#F8D03F,#FC4768);
          -webkit-background-clip: text;
          color: transparent;
        }
      }
    }
  }
  .everydaySales{
    height: 27.8%;
    width: 68.8%;
    position: absolute;
    top: 41%;
    left: 1%;
  }
  .proportion{
    width: 28%;
    right: 1%;
    position: absolute;
    top:11%;
    height: 54%;
  }
}
.tableBox{
  background-color: rgba(0,0,255,.2);
  position: relative;
  padding: 10px 10px 0 10px;
  .reportTitle{
    font-size: 0.6em;
    color: #FEFEFE;
  }
  .xial{
    width: 45px;
    height: 10px;
    background-image: url("../../../assets/images/cockpit/xial.png");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .leftBor{
    height: 100%;
    position: absolute;
    left: 0;
    margin-top: -10px;
    &:before{
      @extend %subscript;
      border-left: #64FAFC 1px solid;
      border-top: #64FAFC 1px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-left: #64FAFC 1px solid;
      border-bottom: #64FAFC 1px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
  .rightBor{
    height: 100%;
    position: absolute;
    right: 5px;
    margin-top: -10px;
    &:before{
      @extend %subscript;
      border-right: #64FAFC 1px solid;
      border-top: #64FAFC 1px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-right: #64FAFC 1px solid;
      border-bottom: #64FAFC 1px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
  .contentReport{
    border: rgba(0,0,255,0.1) 2px solid;
    position: relative;
    background: rgba(255,255,255,.05);
  }
  .containerLeftBor{
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    &:before{
      @extend %subscript;
      border-left: rgba(0,0,255,.3) 2px solid;
      border-top: rgba(0,0,255,.3) 2px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-left: rgba(0,0,255,.3) 2px solid;
      border-bottom: rgba(0,0,255,.3) 2px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
  .containerRightBor{
    height: 100%;
    position: absolute;
    right: 5px;
    top: 0;
    &:before{
      @extend %subscript;
      border-right: rgba(0,0,255,.3) 2px solid;
      border-top: rgba(0,0,255,.3) 2px solid;
      left: 0;
      top: 0;
      height: 5px;
    }
    &:after{
      @extend %subscript;
      border-right: rgba(0,0,255,.3) 2px solid;
      border-bottom: rgba(0,0,255,.3) 2px solid;
      left: 0;
      bottom: 0;
      height: 5px;
    }
  }
}
.thousand{
  &:after{
    content: ',';
    font-size: 0.3em;
    display: block;
    position: absolute;
    right: 1px;
    bottom: 0;
  }
}
%subscript{
  content: '';
  display: block;
  position: absolute;
  width: 5px;
  height: 5px;
}
#bg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}
.more{
  position: absolute;
  right: 10px;
  font-size: 0.5em;
  background: rgba(0,0,255,.2);
  max-height: 4%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:after{
    content:'更多';
    color:white;
    font-weight: 400;
  }
}

</style>
